<template>
    <div class="tableData">
        <el-table style="width: 100%" :data="config.table_data" highlight-current-row @current-change="handleCurrentChange" height="88%">
            <el-table-column v-if="config.checkbox" type="selection"></el-table-column>
            <!-- <template v-for="(item, index) in config.thead">
                <el-table-column v-if="item.type === 'text'" :prop="item.prop" :label="item.label" />
                <el-table-column v-if="item.type === 'slot'" :label="item.label" :prop="item.prop">
                    <template>
                        <slot :name="item.slot_name">
                        </slot>
                    </template>
                </el-table-column>
                <el-table-column v-if="item.type === 'operation'" :label="item.label">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="setupEvents('edit', scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="setupEvents('del', scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </template> -->
            <div v-for="item in config.thead" :key="item">
                <el-table-column v-if="item.name === 'action' && (item?.if ?? true)" label="操作" :width="item.width">
                    <template slot-scope="scope">
                        <el-button v-for="i in item.buttons" v-if="i.if === undefined ? true : i.if(scope.row)" :key="i.text" type="text" :icon="i.icon" size="mini" @click="() => i.click(scope.row)">
                            {{ i.text }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.name === 'filepath'" :label="item.label" :width="item.width">
                    <template slot-scope="scope">
                        <div v-if="scope.row.filepath === 'None'">暂无</div>
                        <a v-else :href="`/static/upload/${scope.row.filepath}`" target="_blank" style="color: #007bff">{{ scope.row.filepath }}</a>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="['处理状态', '告警等级', '是否处理', '计划状态', '巡检状态'].includes(item.label)" :label="item.label" :width="item.width">
                    <template slot-scope="scope">
                        <el-tag size="small" effect="dark" style="border: none; padding: 0 4px; height: 20px; line-height: 20px; font-size: 14px" :color="rgba(item.color(scope.row[item.name]))">
                            {{ item.format(scope.row[item.name]) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.name === 'photo'" :label="item.label" :width="item.width">
                    <template slot-scope="scope">
                        <el-image title="点击查看大图" class="image" :src="'/static' + scope.row[item.name]" :preview-src-list="['/static' + scope.row[item.name]]">
                            <div slot="error">
                                <img class="image" src="@/assets/Device/no_img_1.png" alt />
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.name === 'dbs'" :width="item.width" :label="item.label" type="expand">
                    <template slot-scope="props" v-if="props.row['dbs'].length !== 0">
                        <div style="display: flex; height: 35px; line-height: 35px">
                            <div style="flex: 1" v-for="item in ['数据库中表名', '表内数据总数', '最新数据更新时间']" :key="item">{{ item }}</div>
                        </div>
                        <div v-for="item in props.row['dbs']" :key="item.name" style="display: flex; height: 25px; line-height: 25px">
                            <div style="flex: 1">{{ item.name | noData }}</div>
                            <div style="flex: 1">{{ item.count | noData }}</div>
                            <div style="flex: 1">{{ item.time | noData }}</div>
                        </div>
                    </template>
                    <template slot-scope="props" v-else>
                        <div>数据库中暂无对应表</div>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.name === 'obj' || item.name === 'obj1'" :width="item.width" :label="item.label">
                    <template slot-scope="props">
                        <div v-for="item in props.row[item.name]" :key="item.test" style="display: flex; height: 25px; line-height: 25px">
                            <div>{{ item.text }}</div>
                            <div>{{ item.value | noData }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.name !== 'action'" :label="item.label" :prop="item.name" :width="item.width">
                    <template slot-scope="scope">
                        <el-tooltip :disabled="item.tooltip === undefined" effect="dark" :content="item.tooltip === undefined ? '' : item.tooltip(scope.row)" placement="top">
                            <div id="textContainer" :style="item.style !== undefined && scope.row[item.name] !== null && scope.row[item.name] !== '' ? item.style(scope.row[item.name]) : ''" v-if="item.format">
                                {{ item.format(scope.row[item.name]) | noData }}
                            </div>
                            <div id="textContainer" :style="item.style !== undefined && scope.row[item.name] !== null && scope.row[item.name] !== '' ? item.style(scope.row[item.name]) : ''" v-else>
                                {{ scope.row[item.name] | noData }}
                            </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </div>
        </el-table>
        <div class="pagination" v-if="pagination">
            <el-pagination :page-size="pagination.pageSize" layout="total,prev, pager, next, jumper" :total="pagination.total" @current-change="changePage"></el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentRow: null, //选中行
        }
    },
    methods: {
        setupEvents(setupType, row) {
            // 操作列方法 查看/编辑/删除/操作日志

            this.$emit(setupType, row)
        },
        handleCurrentChange(val) {
            this.currentRow = val
        },
        changePage(e) {
            this.$emit('changePage', e)
        },
    },
    props: {
        config: {
            type: Object,
            default: () => {},
        },
        pagination: {
            type: Object,
            default: () => {},
        },
    },
    created() {},
}
</script>

<style lang="less" scoped>
.tableData {
    width: 100%;
    height: 100%;
    position: absolute;
    .pagination {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 0;
    }
}
</style>
